<template>
	<view>
		<!-- <u-sticky>
			<view class="dingbu">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<view class="flexbetween">
						<view class="flexleft" slot="left" style="width: 33.33%;"></view>
						<view class="" style="width: 33.33%;">
							<view class="sanshier zhonghei textcenter fonweight">联盟商城</view>
						</view>
						<view class="" style="width: 33.33%;"></view>
					</view>
				</view>
			</view>
		</u-sticky> -->
		<view class="mainpadding" style="position: relative; z-index: 2;">
			<image class="beijt" src="../static/images/system/bjc.png" mode=""></image>
			<view class="ffffff flexbetween ssbox">
				<view class="flexleft">
					<u-icon name="search" color="#999" size="20"></u-icon>
					<input type="text" placeholder="请输入搜索内容" class="hei_text main_size bold" v-model="keywords"
						confirm-type="search" @confirm="shangpinb('/pages_lianmengsc/shangpinlb?keywords=',keywords)">
				</view>
				<view class="rightss" @click="shangpinb('/pages_lianmengsc/shangpinlb?keywords=',keywords)">搜索</view>
			</view>
		</view>
		<view class="mainpadding2 ffffff">
			<!-- <u-swiper :list="list1" keyName="image_text" indicator circular @click="lbtclick($event,list1)"></u-swiper>
			<view class="margin_top">
				<u-notice-bar :text="text1" direction="column" @click="enternews($event)"></u-notice-bar>
			</view> -->
			<!-- <view class="flexleft flex-wrap">
				<view class="flexcolumn margin_top" style="width: 20%;" @click="jumper('/pages_lianmengsc/minsuijd')">
					<image class="jgqimg" src="@/static/images/system/mscy.png" mode=""></image>
					<view class="xiaohei strongtext margin_top1">酒店民宿</view>
				</view>
				<view class="flexcolumn margin_top" style="width: 20%;" v-for="item in leftlist" :key="item.id"
					@click="tzgywm(item.name,item.id)">
					<image class="jgqimg" :src="item.image_text" mode=""></image>
					<view class="xiaohei strongtext margin_top1">{{item.name}}</view>
				</view>
			</view> -->
			<swiper class="swiper"style="height: 380rpx;" :indicator-dots="true">
				<swiper-item v-for="(item,index) in leftlist" :key="index">
					<view class="flexleft flex-wrap">
						<view class="flexcolumn margin_top" style="width: 20%;" v-for="ite in leftlist[index]" :key="ite.id"
							@click="tzgywm(ite.name,ite.id)">
							<image class="jgqimg" :src="ite.image_text" mode=""></image>
							<view class="xiaohei strongtext margin_top1">{{ite.name}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<view class="flexbetween margin_top">
				<view class="pmitp1" @click="jumper('/pages_shouye/pintuan')">
					<view class="sanshier zhonghei fonweight">拼团</view>
					<view class="strongtext margin_top1" style="color: #ED8778;">限时抢购</view>
				</view>
				<view class="pmitp2" @click="jumper('/pages_shouye/miaosha')">
					<view class="sanshier zhonghei fonweight">秒杀</view>
					<view class="strongtext margin_top1" style="color: #ED8778;">限时秒杀</view>
				</view>
				<view class="pmitp3" @click="jumper('/pages_lianmengsc/lingquanzx')">
					<view class="sanshier zhonghei fonweight">领券</view>
					<view class="strongtext margin_top1" style="color: #ED8778;">领券中心</view>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="flexleft">
					<view class="line margin_right"></view>
					<view class="titletext hei_text bold">精品商品</view>
				</view>
				<view class="flexright margin_right" @click="jumper('/pages_lianmengsc/shangpinlb')">
					<view class="xiaohuang margin_right1 main_size">查看全部</view>
					<u-icon name="arrow-right" color="#ff9341" size="12"></u-icon>
				</view>
			</view>
		</view>
		<view class="mainpadding2 flexbetween flex-wrap" style="background-color: #bbbbbb;">
			<view class="itemgoods margin_top" v-for="item in list.data" :key="item.id"
				@click="tzspxq(item.id,item.goods_attr)">
				<image :src="item.image_text" mode=""></image>
				<view class="contentbox">
					<view class="yihang xiaohei main_size">{{item.title}}</view>
					<view class="flexleft">
						<view class="xiaohong titletext bold" v-if="item.goods_attr==1">
							￥{{item.goodsprice.price}}
							<!-- ￥{{(Number(item.goodsprice.price)-Number(item.goodsprice.score_price)-Number(item.sdyh_price)-Number(item.activity_price)).toFixed(2)}} -->
						</view>
					</view>
					<view class="xiaohui smalltext" style="font-size: 20rpx;" v-show="Number(item.goodsprice.score_price)">
						积分抵扣￥{{item.goodsprice.score_price}}</view>
					<view class="flexleft">
						<view class="xiaohui smalltext margin_right1" style="font-size: 20rpx;" v-show="Number(item.sdyh_price)">
							首单优惠￥{{item.sdyh_price}}</view>
						<view class="xiaohui smalltext" style="font-size: 20rpx;" v-show="Number(item.activity_price)">
							活动优惠￥{{item.activity_price}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="ffffff radius mainpadding2s margin_top" v-if="item.css_type==2">
					<view class="flexleft">
						<view class="flexcenter sanshis" v-for="(ite,inde) in item.images_text" :key="inde" v-if="inde<3">
							<image class="tupian" :src="ite" mode=""></image>
						</view>
					</view>
					<view class="xiaohei ershil margin_top2">{{item.title}}</view>
					<view class="flexleft margin_top2">
						<view class="fenbox margin_right1" v-show="Number(item.goodsprice.score_price)">积分抵扣￥{{item.goodsprice.score_price}}</view>
						<view class="huangbox margin_right1" v-show="Number(item.sdyh_price)">首单优惠￥{{item.sdyh_price}}</view>
						<view class="fenbox" v-show="Number(item.activity_price)">活动优惠￥{{item.activity_price}}</view>
					</view>
					<view class="flexleft margin_top2">
						<view class="xiaocheng fonweight strongtext margin_right4" v-if="item.goods_attr==1">￥{{Number(item.goodsprice.price)-Number(item.goodsprice.score_price)-Number(item.sdyh_price)-Number(item.activity_price)}}</view>
						<view class="xiaohui smalltext zhonghuax">¥{{item.goodsprice.price}}</view>
					</view>
				</view>
				<view class="ffffff radius mainpadding2s margin_top flexbetween"  v-if="item.css_type==1">
					<image class="tupian" :src="item.image_text" mode=""></image>
					<view class="" style="width: 66%;">
						<view class="xiaohei ershil margin_top2 xiankuan1">{{item.title}}</view>
						<view class="flexleft margin_top2">
							<view class="fenbox margin_right1" v-show="Number(item.goodsprice.score_price)">积分抵扣￥{{item.goodsprice.score_price}}</view>
							<view class="huangbox margin_right1" v-show="Number(item.sdyh_price)">首单优惠￥{{item.sdyh_price}}</view>
							<view class="fenbox" v-show="Number(item.activity_price)">活动优惠￥{{item.activity_price}}</view>
						</view>
						<view class="flexleft margin_top2">
							<view class="xiaocheng fonweight strongtext margin_right4" v-if="item.goods_attr==1">￥{{Number(item.goodsprice.price)-Number(item.goodsprice.score_price)-Number(item.sdyh_price)-Number(item.activity_price)}}</view>
							<view class="xiaohui smalltext zhonghuax">¥{{item.goodsprice.price}}</view>
						</view>
					</view>
				</view> -->
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				menutop: 0,
				list1: [],
				text1: [],
				newsData: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				keywords: "",
				leftlist: []

			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
			// #endif
			this.init()
			this.getfl()
			// this.getnews()
			// this.getbanner()
		},
		onShareAppMessage: function(options) {
			return {
				title: '喜嘟来商业联盟',
				imageUrl: '',
				path: '/pages/index/index?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		onShareTimeline: function() {
			return {
				title: '喜嘟来商业联盟',
				imageUrl: '',
				path: '/pages/index/index?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		methods: {
			getbanner() { //获取轮播图
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 1,
					is_more: 1
				}).then(res => {
					this.list1 = res.data
				}).catch(err => {})
			},
			getnews() { //滚动消息
				httpRequest.request('/api/index/noticeIndex', 'GET', {
					ly: 2,
				}, false, false, true).then(res => {
					let arr = []
					res.data.data.forEach(item => {
						arr.push(item.name)
					})
					this.text1 = arr
					this.newsData = res.data.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			enternews(index) {
				uni.navigateTo({
					url: "/pages_wode/gonggaoxq?type=2&id=" + this.newsData[index].id
				})
			},
			getfl() {
				httpRequest.request('/api/index/shopCategory', 'GET', {
					isnav: 1,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.unshift({
							id:"jdms",
							name:"酒店民宿",
							image_text:'/static/images/system/mscy.png'
						})
						this.leftlist = this.chuliemo(res.data, 10)
					}
				})
			},
			chuliemo(arr, num) { //转化为50等分的数组,(表情包使用)
				var newArr = []
				for (var i = 0; i < arr.length; i += num) {
					newArr.push(arr.slice(i, i + num))
				}
				return newArr
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/goodscl/goodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					is_jp: 2,
					goods_attr: 1
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			tzspxq(id, attr) {
				uni.navigateTo({
					url: '/pages_lianmengsc/shangpxq?id=' + id + "&attr=" + attr
				})
			},
			shangpinb(url, val) {
				uni.navigateTo({
					url: url + val
				})
			},
			tzgywm(name, category_id) {
				if(category_id=='jdms'){
					this.jumper('/pages_lianmengsc/minsuijd')
					return false
				}
				let data = {
					navname: name,
					category_id
				}
				uni.navigateTo({
					url: "/pages_lianmengsc/meishicy?msg=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			jumper(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.itemgoods {
		width: 48%;
		background-color: #fff;
		border-radius: 10rpx;

		image {
			width: 100%;
			height: 350rpx;
			border-radius: 10rpx;
		}

		.contentbox {
			padding: 20rpx 15rpx;

			.smalltext {
				font-size: 12rpx;
			}
		}
	}

	.pmitp1 {
		box-sizing: border-box;
		width: 30.5%;
		padding: 24rpx 28rpx;
		background-size: 100% 100%;
		background-image: url('@/static/images/system/pintuan.png');
	}

	.pmitp2 {
		box-sizing: border-box;
		width: 30.5%;
		padding: 24rpx 28rpx;
		background-size: 100% 100%;
		background-image: url('@/static/images/system/miaosha.png');
	}

	.pmitp3 {
		box-sizing: border-box;
		width: 30.5%;
		padding: 24rpx 28rpx;
		background-size: 100% 100%;
		background-image: url('@/static/images/system/lingquan.png');
	}

	.huangbox {
		background-color: #fff5ec;
		padding: 4rpx 7rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
	}

	.fenbox {
		background-color: #fff0ef;
		padding: 4rpx 7rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FB605C;
	}

	.tupian {
		width: 200rpx;
		height: 200rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.jgqimg {
		width: 90rpx;
		height: 90rpx;
	}

	.beijt {
		width: 100%;
		height: 195rpx;
		position: absolute;
		top: -30rpx;
		left: 0;
	}

	.dingbu {
		padding: 0 30rpx 30rpx;
		background-size: 100% 100%;
		width: 100%;
		box-sizing: border-box;
		background-image: url('https://solarmini.yuntaiqi.com/uploads/20240116/93135388fbd8b94a0cbd2c5ffe367a0b.png');
	}
</style>